<template>
  <el-container>
    <el-header :style="headerStyle">
      <homeHeader @showConnectionForm="showConnectionForm" @getMainActiveCompent="getMainActiveCompent"
                  ref="header"></homeHeader>
    </el-header>
    <el-container>
      <el-aside :style="asideStyle">
        <homeAside @useBrotherMethod="runChildMethord" @editConnection="showConnectionForm" ref="aside"/>
      </el-aside>
      <el-main :style='mainStyle'>
        <mainOperation :parameter="mainOperationParam" ref="main"/>
      </el-main>
    </el-container>
    <el-footer :style="footerStyle" ref="footer">状态栏</el-footer>

    <el-dialog
        title="数据源编辑"
        width="30%"
        v-if="connectionFormShow"
        :visible.sync="connectionFormShow"
        :close-on-click-modal="false"
        @close="dialogClose"
        :center="true"
    >
      <connection-form ref="connectionForm" @dialogClose="dialogClose" @useBrotherMethod="runChildMethord"
                       :paramerter="connectionFormParam"></connection-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="connectionFormShow = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="$refs.connectionForm.save()">保 存</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import homeHeader from './header'
import homeAside from './aside'
import connectionForm from '../dbform/connection-form'
import mainOperation from './main-operation'

export default {
  name: 'home-page',
  components: {
    homeHeader,
    homeAside,
    connectionForm,
    mainOperation
  },
  data () {
    return {
      // connectionForm  相关参数
      connectionFormShow: false,
      connectionFormParam: {},
      mainOperationParam: {},
      headerStyle: {
        'height': '60px',
      },
      footerStyle: {
        'line-height': '60px'
      },
      mainStyle: {
        'padding-top': '0px',
        'height': (window.innerHeight - 167) + 'px'
      },
      asideStyle: {
        'width': '200px',
        'height': (window.innerHeight - 167) + 'px'
      }
    }
  },
  methods: {
    //约定param为参数对象
    runChildMethord (ref, method, param) {
      this.$refs[ref][method](param)
    },
    dialogClose () {
      this.connectionFormShow = false
    },
    showConnectionForm (mode, data) {
      if (!!data) {
        this.connectionFormParam = data
      }
      this.connectionFormParam.isAdd = mode
      this.connectionFormShow = true
    },
    getMainActiveCompent (method,param) {
       this.$refs.main.getActiveCompent()[method](param);
    }
  }
}
</script>

<style scoped>

</style>
